﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" />
    <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
        can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
    <title id='Description'>This demo shows how to display images in jqxTabs. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Creating jqxTabs
            $('#jqxTabs').jqxTabs({ width: 500,  selectionTracker: true, animationType: 'fade' });
        });
    </script>
    <style type="text/css">
        .big-image
        {
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #999;
            background: #fff;
            padding: 3px;
        }
        .small-image
        {
            border: 1px solid #ccc;
            background: #fff;
            padding: 3px;
        }
        .content-container
        {
            padding-left: 15px;
            padding-top: 15px;
            padding-right: 15px;
        }
        .important-text
        {
            font-size: 13px;
            color: #000;
        }
        .more-text
        {
            color: #444;
            font-size: 11px;
            font-style: italic;
        }
    </style>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left">
            <div id='jqxTabs' class='jqx-rc-all'>
                <ul style="margin-left: 40px;" id="unorderedList">
                    <li>
                        <div style="height: 40px;">
                            <img style='float: left;' width='32' height='32' src="../../images/building_small.jpg" alt="" class="small-image" />
                            <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                                30 St Mary<br />
                                Axe</div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 40px;">
                            <img style='float: left;' width='32' height='32' src="../../images/building2_small.jpg" alt="" class="small-image" />
                            <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                                Burj Al Arab</div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 40px;">
                            <img style='float: left;' width='32' height='32' src="../../images/building3_small.jpg" alt="" class="small-image" />
                            <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                                The Willis
                                <br />
                                Tower</div>
                        </div>
                    </li>
                </ul>
                <div class="content-container">
                    <div style="height: 400px">
                        <img src="../../images/building_big.jpg" alt="" class="big-image" />
                        <h3>
                            30 St Mary Axe</h3>
                        <p class="important-text">
                            the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper
                            in London's main financial district, the City of London, completed in December 2003
                            and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591
                            ft) tall, and stands on the former site of the Baltic Exchange building, which was
                            severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional
                            IRA.
                        </p>
                        <div class="more-text">
                            The building is on the former site of the Baltic Exchange building, the headquarters
                            of a global marketplace for ship sales and shipping information. On 10 April 1992
                            the Provisional IRA detonated a bomb close to the Exchange, severely damaging the
                            historic Exchange building and neighbouring structures. The UK government's statutory
                            adviser on the historic environment, English Heritage, and the City of London governing
                            body, the City of London Corporation, were keen that any redevelopment must restore
                            the building's old façade onto St Mary Axe. The Exchange Hall was a celebrated fixture
                            of the ship trading company.
                        </div>
                    </div>
                </div>
                <div class="content-container">
                    <div style="height: 400px">
                        <img src="../../images/building2_big.jpg" alt="" class="big-image" />
                        <h3>
                            Burj Al Arab</h3>
                        <p class="important-text">
                            is a 5-star luxury hotel located in Dubai, United Arab Emirates. At 321 m (1,053
                            ft), it is the fourth tallest hotel in the world. Burj Al Arab stands on an artificial
                            island 280 m (920 ft) out from Jumeirah beach, and is connected to the mainland
                            by a private curving bridge. It is an iconic structure whose shape mimics the sail
                            of a ship.
                        </p>
                        <div class="more-text">
                            The beachfront area where Burj Al Arab and Jumeirah Beach Hotel are located was
                            previously called Chicago Beach. The hotel is located on an island of reclaimed
                            land 280 meters offshore of the beach of the former Chicago Beach Hotel. The locale's
                            name had its origins in the Chicago Bridge & Iron Company which at one time welded
                            giant floating oil storage tankers on the site. The old name persisted after the
                            old Hotel was demolished in 1997. Dubai Chicago Beach Hotel remained as the Public
                            Project Name for the construction phase of Burj Al Arab Hotel until Sheikh Mohammed
                            bin Rashid Al Maktoum announced the new name.
                        </div>
                    </div>
                </div>
                <div class="content-container">
                    <div style="height: 400px">
                        <img src="../../images/building3_big.jpg" alt="" class="big-image" />
                        <h3>
                            The Willis Tower</h3>
                        <p class="important-text">
                            (formerly named, and still commonly referred to as, the Sears Tower) is a 108-story,
                            1,451-foot (442 m) skyscraper in Chicago, Illinois. At the time of its completion
                            in 1973, it was the tallest building in the world, surpassing the World Trade Center
                            towers in New York, and it held this rank for nearly 25 years. The Willis Tower
                            is the tallest building in the United States and the fifth-tallest freestanding
                            structure in the world, as well as the fifth-tallest building in the world to the
                            roof.
                        </p>
                        <div class="more-text">
                            Although Sears's naming rights expired in 2003, the building continued to be called
                            the Sears Tower for several years. In March 2009, London-based insurance broker
                            Willis Group Holdings agreed to lease a portion of the building, and obtained the
                            building's naming rights. On July 16, 2009, the building was officially renamed
                            the Willis Tower.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
